<template>
  <div class="login-container">
    <el-form :model="teacher"  label-width="120px">

    <el-form-item label="讲师头像">    
      <!-- 头衔缩略图 -->    
      <pan-thumb :image="teacher.avatar"/>    
      <!-- 文件上传按钮 -->   
      <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像</el-button>
        <!--11v-show：是否显示上传组件
        :key：类似于id，如果一个页面多个图片上传控件，可以做区分13
        :url：后台上传的url地址
        @close：关闭上传组件
        @crop-upload-success：上传成功后的回调-->
      <image-cropper 
        v-show="imagecropperShow" 
        :width="300" :height="300"    
        :key="imagecropperKey"                   
        :url="BASE_API+'/eduoss/fileoss'"
        field="file"                  
        @close="close"
        @crop-upload-success="cropSuccess"/>
      </el-form-item>

      <el-form-item label="讲师名称">
        <el-input v-model="teacher.name"></el-input>
      </el-form-item>

      <el-form-item label="讲师排序">
        <el-input-number v-model="teacher.sort" controls-position="right" />
      </el-form-item>

      <el-form-item label="讲师头衔">
        <el-select v-model="teacher.level"  clearable  placeholder="请选择讲师头衔">
          <el-option label="高级讲师" :value="1"></el-option>
          <el-option label="首席讲师" :value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="讲师资历">
        <el-input v-model="teacher.career"></el-input>
      </el-form-item>

      <el-form-item label="讲师简介">
        <el-input type="textarea" v-model="teacher.intro" :rows="10"></el-input>
      </el-form-item>

      <el-form-item>
    <el-button type="primary" @click="saveOrUpdate">提交</el-button>
    <el-button>取消</el-button>
  </el-form-item>
    </el-form>
  </div>
</template>
<script>
import teacherApi from '@/api/edu/teacher'
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
export default {
  components:{ImageCropper,PanThumb},
  data(){
    return{
      BASE_API: process.env.BASE_API,// 接口API地址     
      imagecropperShow: false,// 是否显示上传组件      
      imagecropperKey: 0,//上传组件id
      teacher:{
        name:'',
        sort:'',
        level:1,
        career:"",
        intro:'',
        avatar:'http://cdn.laowang.shop/touxiang'
      }
    }
  },
  created(){
    //获取路径参数,判断当前是保存还是更新讲师
     this.init()
  },
  watch:{
    $route(to,from){
      this.init()
    }
  },
  methods:{
    init(){
      //获取路径参数,判断当前是保存还是更新讲师
      if(this.$route.params && this.$route.params.id){
        const id=this.$route.params.id
        console.log(id)
        //根据id查询信息
        this.getTeacherInfo(id)
      }else{
        this.teacher={}
      }
    },
    saveOrUpdate(){
      //id如果不在，则执行保存，在执行更新
      if(!this.teacher.id){
        this.save()
      }else{
        this.updateTeacher()
      }
    },
    //保存
    save(){
      teacherApi.saveTeacher(this.teacher).then(res =>{
        this.$message({
          type: 'success',
          message: '添加成功!'
        });
        //跳到列表页
        this.$router.push({path:'/teacher/list'})
      })
    },

    //更新
    updateTeacher(){
      teacherApi.updateTeacher(this.teacher).then(res=>{
        this.$message({
          type: 'success',
          message: '修改成功!'
        });
        //跳到列表页
        this.$router.push({path:'/teacher/list'})
      })
    },

    //根据id获取讲师信息
    getTeacherInfo(id){
      teacherApi.getTeacherInfo(id).then(res=>{
        this.teacher=res.data.teacher
      })
    },

    //关闭头像上传框
    close(){
      this.imagecropperShow=false
      //让组件继续初始化
      this.imagecropperKey=this.imagecropperKey+1
    },
    //上传成功回调
    cropSuccess(data){
      this.close()
      this.teacher.avatar=data.url
    }
  }
}
</script>